<template>
  <div class="container">
    <div class="home-layout" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.7)">
      <div class="home-main">
        <section class="hero">
          <h1 class="site-title">lcp's Blog</h1>
          <p class="site-quote">You Only Live Once.</p>
          <p class="site-quote-cn">人生苦短，及时行乐~</p>
        </section>

        <section class="latest-post section">
          <div class="section-header">
            <h2 class="section-title">最新文章</h2>
            <router-link to="/posts" class="section-more">查看全部 →</router-link>
          </div>

          <div class="posts-grid">
            <div v-for="post in latestPosts" :key="post.id" class="post-card card">
              <router-link :to="`/posts/${post.id}`" class="post-link">
                <h3 class="post-title">{{ post.title }}</h3>
                <div class="post-meta">
                  <span class="post-date">{{ post.createdTime }}</span>
                  <span class="post-views">{{ post.views }} views</span>
                </div>
                <p class="post-excerpt">{{ post.summary }}</p>
                <div class="post-tags">
                  <span v-for="tag in post.tagNames" :key="tag" class="post-tag">{{ tag }}</span>
                </div>
              </router-link>
            </div>
          </div>
        </section>

        
      </div>
      <aside class="home-sidebar">
        <div class="profile-card card">
          <div class="profile-header">
            <img src="../../public/logo.jpg" alt="lcp" class="profile-avatar" />
            <h3 class="profile-name">lcp</h3>
          </div>
          <p class="profile-bio">Everything can be done的开发者，giao~</p>
          <div class="profile-links">
            <a href="https://gitee.com/lcp20010801/projects" class="profile-link" target="_blank">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path
                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
                </path>
              </svg>
              GitHub
            </a>
            <router-link to="/about" class="profile-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              关于我
            </router-link>
          </div>

        </div>

        <div class="popular-posts card">
          <h3 class="card-title">热门文章</h3>
          <ul class="popular-list">
            <li v-for="post in hottestPosts" :key="post.id" class="popular-item">
              <router-link :to="`/posts/${post.id}`" class="popular-link">
                <h4 class="popular-title">{{ post.title }}</h4>
                <div class="popular-meta">
                  <div class="post-tags">
                    <span v-for="tag in post.tagNames" :key="tag" class="post-tag">{{ tag }}</span>
                  </div>
                  <span class="popular-views">{{ post.views }} views</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getlatestAndHottest } from '../api/post.js';
import { saveView } from '../api/home.js';

const latestPosts = ref([])
const hottestPosts = ref([])
const loading = ref(true)

onMounted(() => {
  // 获取最新和最热文章
  getlatestAndHottest().then(res => {
    latestPosts.value = res.data.latest
    hottestPosts.value = res.data.hottest
  }).finally(() => {
    loading.value = false
  })
  
  // 记录访问量，添加限制防止短时间内重复计数
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  const visitDate = `${year}-${month}-${day}`
  
  // 获取上次访问记录
  const lastVisitKey = 'last_visit_date'
  const lastVisitDate = localStorage.getItem(lastVisitKey)
  
  // 如果不存在上次访问记录，或者上次访问的日期与今天不同，则记录访问量
  if (!lastVisitDate || lastVisitDate !== visitDate) {
    // 调用saveView API记录访问量
    saveView({ visitDate })
      .then(() => {
        // 保存本次访问记录到localStorage
        localStorage.setItem(lastVisitKey, visitDate)
      })
      .catch(error => {
        console.error('记录访问量失败:', error)
      })
  }
})
</script>

<style scoped>
.home-layout {
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
}

.hero {
  margin-bottom: 3rem;
}

.site-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.site-quote {
  font-size: 1.25rem;
  font-style: italic;
  color: #666;
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
}

.site-quote-cn {
  font-size: 1.25rem;
  color: #555;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.section-more {
  font-size: 0.875rem;
  color: var(--color-primary);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.post-card {
  height: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-link {
  display: block;
  color: var(--color-text);
  height: 100%;
}

.post-link:hover {
  text-decoration: none;
}

.post-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 0.75rem;
}

.post-excerpt {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  color: #444;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.post-tag {
  padding: 0.25rem 0.5rem;
  background-color: #f0f4f8;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-primary);
}

.moments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.moment-item {
  display: flex;
  gap: 1rem;
}

.moment-date {
  min-width: 60px;
  text-align: center;
}

.moment-day {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.moment-month-year {
  font-size: 0.75rem;
  color: #666;
}

.moment-content {
  flex: 1;
}

.moment-text {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.moment-link {
  font-size: 0.75rem;
  color: var(--color-primary);
}

.profile-card {
  margin-bottom: 2rem;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 600;
}

.profile-bio {
  margin-bottom: 1.25rem;
  color: #555;
  font-size: 0.875rem;
}

.profile-links {
  display: flex;
  gap: 1rem;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-primary);
}

.card-title {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.popular-list {
  list-style: none;
}

.popular-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.popular-item:last-child {
  border-bottom: none;
}

.popular-link {
  display: block;
  color: var(--color-text);
}

.popular-link:hover {
  text-decoration: none;
}

.popular-title {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.popular-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

@media (max-width: 992px) {
  .home-layout {
    grid-template-columns: 1fr;
  }
}
</style>
